@using AntDesign.Charts
@using Title = AntDesign.Charts.Title

<Tabs>
    <TabPane Key="1">
        <Tab>示例1</Tab>
        <ChildContent>
            <Bar Data="data1" Config="config1"/>
        </ChildContent>
    </TabPane>
    <TabPane Key="2">
        <Tab>示例2</Tab>
        <ChildContent>
            <Bar Data="data2" Config="config2"/>
        </ChildContent>
    </TabPane>
    <TabPane Key="3">
        <Tab>示例3</Tab>
        <ChildContent>
            <Bar Data="data3" Config="config3"/>
        </ChildContent>
    </TabPane>
    <TabPane Key="4">
        <Tab>示例4</Tab>
        <ChildContent>
            <Bar Data="data4" Config="config4"/>
        </ChildContent>
    </TabPane>
</Tabs>

@code{

    #region 示例1

    readonly object[] data1 =
    {
        new {地区 = "华东", 销售额 = 4684506.442},
        new {地区 = "中南", 销售额 = 4137415.0929999948},
        new {地区 = "东北", 销售额 = 2681567.469000001},
        new {地区 = "华北", 销售额 = 2447301.017000004},
        new {地区 = "西南", 销售额 = 1303124.508000002},
        new {地区 = "西北", 销售额 = 815039.5959999998}
    };

    readonly BarConfig config1 = new BarConfig
    {
        Title = new Title
        {
            Visible = true,
            Text = "基础条形图"
        },
        ForceFit = true,
        XField = "销售额",
        YField = "地区",
        Label = new BarViewConfigLabel
        {
            Visible = true
        }
    };

    #endregion 示例1

    #region 示例2

    readonly object[] data2 =
    {
        new {地区 = "华东", 销售额 = 4684506.442},
        new {地区 = "中南", 销售额 = 4137415.0929999948},
        new {地区 = "东北", 销售额 = 2681567.469000001},
        new {地区 = "华北", 销售额 = 2447301.017000004},
        new {地区 = "西南", 销售额 = 1303124.508000002},
        new {地区 = "西北", 销售额 = 815039.5959999998}
    };

    readonly BarConfig config2 = new BarConfig
    {
        Title = new Title
        {
            Visible = true,
            Text = "基础条形图"
        },
        ForceFit = true,
        XField = "销售额",
        YField = "地区",
        Label = new BarViewConfigLabel
        {
            Visible = true,
            Position = "middle"
        }
    };

    #endregion 示例2

    #region 示例3

    readonly object[] data3 =
    {
        new {year = "1951 年", sales = 38, category = "A"},
        new {year = "1952 年", sales = 52, category = "A"},
        new {year = "1956 年", sales = 61, category = "A"},
        new {year = "1957 年", sales = 145, category = "A"},
        new {year = "1958 年", sales = 48, category = "B"}
    };

    readonly BarConfig config3 = new BarConfig
    {
        ForceFit = true,
        Title = new Title
        {
            Visible = true,
            Text = "基础条形图 - 图形标签颜色自适应"
        },
        Description = new Description
        {
            Visible = true,
            Text = "图形标签(label)的adjustColor配置项默认设置为true，位于柱形的内部的label颜色会根据柱形颜色自动调整，保证可读性。"
        },
        XField = "sales",
        YField = "year",
        ColorField = "year",
        Color = new[] {"#55A6F3", "#CED4DE", "#55A6F3", "#55A6F3", "#55A6F3"},
        Label = new BarViewConfigLabel
        {
            Visible = true,
            Position = "middle", // options= left / middle / right
            AdjustColor = true
        }
    };

    #endregion 示例3

    #region 示例4

    readonly object[] data4 =
    {
        new {action = "浏览网站", pv = 50000},
        new {action = "放入购物车", pv = 35000},
        new {action = "生成订单", pv = 25000},
        new {action = "支付订单", pv = 15000},
        new {action = "完成交易", pv = 8500}
    };

    readonly BarConfig config4 = new BarConfig
    {
        Title = new Title
        {
            Visible = true,
            Text = "基础条形图"
        },
        Description = new Description
        {
            Visible = true,
            Text = "基础条形图的图形之间添加转化率标签图形，用户希望关注从上到下的数据变化比例"
        },
        ForceFit = true,
        XField = "pv",
        YField = "action",
        ConversionTag = new ConversionTagOptions
        {
            Visible = true
        }
    };

    #endregion 示例4

}